/* 全局样式重置 */
* {
    box-sizing: border-box; /* 使用边框盒模型 */
    margin: 0; /* 外边距为0 */
    padding: 0; /* 内边距为0 */
}

/* 页面主体样式 */
body {
    display: flex; /* 使用弹性布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    min-height: 100vh; /* 最小高度为视口高度 */
    background: linear-gradient(45deg, #1a1a1a, #2c2c2c); /* 背景渐变 */
    font-family: Arial, sans-serif; /* 设置字体 */
}

/* 时钟容器样式 */
.clock {
    display: flex; /* 使用弹性布局 */
    align-items: center; /* 垂直居中 */
    gap: calc(2vw); /* 元素间隔 */
    width: 50vw; /* 宽度50% */
}

/* 翻转器样式 */
.flipper {
    position: relative; /* 相对定位 */
    width: calc(15vw); /* 宽度15% */
    height: calc(15vw); /* 高度15% */
    background-color: #333; /* 背景色深灰 */
    border-radius: calc(1vw); /* 圆角1% */
    perspective: calc(40vw); /* 3D视角 */
}

.top, .bottom, .top-flip, .bottom-flip {
    position: absolute; /* 绝对定位 */
    width: 100%; /* 宽度100% */
    height: 50%; /* 高度50% */
    overflow: hidden; /* 溢出隐藏 */
    display: flex; /* 弹性布局 */
    justify-content: center; /* 水平居中 */
    font-size: calc(10vw); /* 字体大小10% */
    line-height: calc(15vw); /* 行高15% */
    color: #fff; /* 文字颜色白色 */
    background-color: #444; /* 背景色深灰 */
}

.top, .top-flip {
    background-color: #4a4a4a; /* 背景色稍浅灰 */
    border-top-left-radius: calc(1vw); /* 左上圆角 */
    border-top-right-radius: calc(1vw); /* 右上圆角 */
    border-bottom: 1px solid rgba(0, 0, 0, 0.3); /* 底部边框 */
    transform-origin: top; /* 变换原点在顶部 */
}

.bottom, .bottom-flip {
    bottom: 0; /* 底部对齐 */
    background-color: #3a3a3a; /* 背景色较深灰 */
    border-bottom-left-radius: calc(1vw); /* 左下圆角 */
    border-bottom-right-radius: calc(1vw); /* 右下圆角 */
    transform-origin: bottom; /* 变换原点在底部 */
    line-height: 0; /* 行高为0 */
}

.top-flip {
    position: absolute; /* 绝对定位 */
    transform-origin: bottom; /* 变换原点在底部 */
}

.bottom-flip {
    position: absolute; /* 绝对定位 */
    transform-origin: top; /* 变换原点在顶部 */
}

/* 动画类 */
.flip-top {
    animation-name: flip-top;
    animation-duration: 0.5s;
    animation-timing-function: ease-in;
    animation-fill-mode: forwards;
}

.flip-bottom {
    animation-name: flip-bottom;
    animation-duration: 0.5s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}

/* 定义顶部翻转动画 */
@keyframes flip-top {
    0% {
        transform: rotateX(0deg); /* 初始状态，无旋转 */
    }
    100% {
        transform: rotateX(-90deg); /* 最终状态，向后旋转90度 */
    }
}

/* 定义底部翻转动画 */
@keyframes flip-bottom {
    0% {
        transform: rotateX(90deg); /* 初始状态，向前旋转90度 */
    }
    100% {
        transform: rotateX(0deg); /* 最终状态，恢复到无旋转 */
    }
}

/* 分隔符样式 */
.divider {
    font-size: 60px; /* 设置字体大小 */
    color: #fff; /* 设置颜色为白色 */
    animation: blink 1s infinite; /* 应用闪烁动画，持续1秒，无限循环 */
}

/* 定义闪烁动画 */
@keyframes blink {
    0%, 100% {
        opacity: 1; /* 开始和结束时完全不透明 */
    }
    50% {
        opacity: 0.5; /* 中间点设置为半透明 */
    }
}

/* 全屏按钮样式 */
.fullscreen-btn {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s;
}

.fullscreen-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.fullscreen-btn svg {
    width: 24px;
    height: 24px;
    stroke: #fff;
}

/* 主题按钮样式 */
.theme-btn {
    position: fixed;
    top: 20px;
    right: 70px;
    width: 40px;
    height: 40px;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s;
}

.theme-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.theme-btn svg {
    width: 24px;
    height: 24px;
    stroke: #fff;
}

/* 模态框样式 */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.modal.show {
    display: flex;
}

.modal-content {
    background: #2c2c2c;
    padding: 20px;
    border-radius: 12px;
    width: 90%;
    max-width: 500px;
}

.modal-content h2 {
    color: #fff;
    margin-bottom: 20px;
    text-align: center;
}

.theme-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 20px;
    padding: 10px;
}

.theme-option {
    cursor: pointer;
    text-align: center;
    padding: 10px;
    border-radius: 8px;
    transition: background-color 0.3s;
}

.theme-option:hover {
    background: rgba(255, 255, 255, 0.1);
}

.theme-preview {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin: 0 auto 10px;
}

.theme-option span {
    color: #fff;
    font-size: 14px;
}

/* 主题预览样式 */
.default-theme {
    background: linear-gradient(45deg, #1a1a1a, #2c2c2c);
}

.dark-theme {
    background: linear-gradient(45deg, #2d3436, #636e72);
}

.sunset-theme {
    background: linear-gradient(45deg, #ff7e5f, #feb47b);
}

.light-theme {
    background: linear-gradient(45deg, #f0f0f0, #ffffff);
}

.ocean-theme {
    background: linear-gradient(45deg, #1a7a9c, #4cc4e9);
}

.forest-theme {
    background: linear-gradient(45deg, #2c5e1e, #68c348);
}

.purple-theme {
    background: linear-gradient(45deg, #6b3d7e, #b154b8);
}

.coffee-theme {
    background: linear-gradient(45deg, #8b6352, #dfa579);
}

.eyecare-theme {
    background: linear-gradient(45deg, #c8e6c9, #e8f5e9);
}

/* 主题样式 */
body.theme-default {
    background: linear-gradient(45deg, #1a1a1a, #2c2c2c);
}

body.theme-dark {
    background: linear-gradient(45deg, #2d3436, #636e72);
}

body.theme-light {
    background: linear-gradient(45deg, #f0f0f0, #ffffff);
}

body.theme-sunset {
    background: linear-gradient(45deg, #ff7e5f, #feb47b);
}

body.theme-ocean {
    background: linear-gradient(45deg, #1a7a9c, #4cc4e9);
}

body.theme-forest {
    background: linear-gradient(45deg, #2c5e1e, #68c348);
}

body.theme-purple {
    background: linear-gradient(45deg, #6b3d7e, #b154b8);
}

body.theme-coffee {
    background: linear-gradient(45deg, #8b6352, #dfa579);
}

body.theme-eyecare {
    background: linear-gradient(45deg, #c8e6c9, #e8f5e9);
}

/* 按钮样式跟随主题 */
body.theme-default .fullscreen-btn,
body.theme-default .theme-btn {
    background: rgba(255, 255, 255, 0.15);
}

body.theme-dark .fullscreen-btn,
body.theme-dark .theme-btn {
    background: rgba(255, 255, 255, 0.1);
}

body.theme-light .fullscreen-btn,
body.theme-light .theme-btn {
    background: rgba(0, 0, 0, 0.1);
}

body.theme-light .fullscreen-btn svg,
body.theme-light .theme-btn svg,
body.theme-eyecare .fullscreen-btn svg,
body.theme-eyecare .theme-btn svg {
    stroke: #2c7a4c;
}

body.theme-eyecare .fullscreen-btn,
body.theme-eyecare .theme-btn {
    background: rgba(44, 122, 76, 0.1);
}

/* 优化后的时钟样式 */
/* 默认主题时钟样式 */
body.theme-default .flipper {
    background-color: #3a3a3a;
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1);
}

body.theme-default .top,
body.theme-default .top-flip {
    background-color: #4d4d4d;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

body.theme-default .bottom,
body.theme-default .bottom-flip {
    background-color: #404040;
    color: #fff;
}

/* 暗黑主题时钟样式 */
body.theme-dark .flipper {
    background-color: #3d4246;
    box-shadow: 0 4px 12px rgba(45, 52, 54, 0.4);
}

body.theme-dark .top,
body.theme-dark .top-flip {
    background-color: #4a5458;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

body.theme-dark .bottom,
body.theme-dark .bottom-flip {
    background-color: #353b3f;
    color: #fff;
}

/* 日落主题时钟样式 */
body.theme-sunset .flipper {
    background-color: #ff956f;
    box-shadow: 0 4px 12px rgba(255, 126, 95, 0.3);
}

body.theme-sunset .top,
body.theme-sunset .top-flip {
    background-color: #ffa77f;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

body.theme-sunset .bottom,
body.theme-sunset .bottom-flip {
    background-color: #ff8a5f;
    color: #fff;
}

body.theme-sunset .divider {
    color: #fff;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

/* 海洋主题时钟样式 */
body.theme-ocean .flipper {
    background-color: #156c8b;
    box-shadow: 0 4px 12px rgba(26, 122, 156, 0.3);
}

body.theme-ocean .top,
body.theme-ocean .top-flip {
    background-color: #1c8ab2;
    color: #fff;
}

body.theme-ocean .bottom,
body.theme-ocean .bottom-flip {
    background-color: #115c77;
    color: #fff;
}

/* 森林主题时钟样式 */
body.theme-forest .flipper {
    background-color: #234b18;
    box-shadow: 0 4px 12px rgba(44, 94, 30, 0.3);
}

body.theme-forest .top,
body.theme-forest .top-flip {
    background-color: #2f6621;
    color: #fff;
}

body.theme-forest .bottom,
body.theme-forest .bottom-flip {
    background-color: #1b3a13;
    color: #fff;
}

/* 紫罗兰主题时钟样式 */
body.theme-purple .flipper {
    background-color: #5c3369;
    box-shadow: 0 4px 12px rgba(107, 61, 126, 0.3);
}

body.theme-purple .top,
body.theme-purple .top-flip {
    background-color: #724180;
    color: #fff;
}

body.theme-purple .bottom,
body.theme-purple .bottom-flip {
    background-color: #4a2854;
    color: #fff;
}

/* 咖啡主题时钟样式 */
body.theme-coffee .flipper {
    background-color: #7d5847;
    box-shadow: 0 4px 12px rgba(139, 99, 82, 0.3);
}

body.theme-coffee .top,
body.theme-coffee .top-flip {
    background-color: #96695a;
    color: #fff;
}

body.theme-coffee .bottom,
body.theme-coffee .bottom-flip {
    background-color: #664539;
    color: #fff;
}

/* 护眼主题时钟样式 */
body.theme-eyecare .flipper {
    background-color: #81c784;
    box-shadow: 0 4px 12px rgba(129, 199, 132, 0.2);
}

body.theme-eyecare .top,
body.theme-eyecare .top-flip {
    background-color: #97d498;
    color: #2c7a4c;
    border-bottom: 1px solid rgba(44, 122, 76, 0.1);
}

body.theme-eyecare .bottom,
body.theme-eyecare .bottom-flip {
    background-color: #74b677;
    color: #2c7a4c;
}

body.theme-eyecare .divider {
    color: #2c7a4c;
}

/* 主题切换时的过渡效果 */
body,
.flipper,
.top,
.bottom,
.top-flip,
.bottom-flip,
.divider {
    transition: all 0.3s ease-in-out;
}

/* 全屏模式下的样式调整 */
:fullscreen .clock {
    transform: scale(1.2);
}

:-webkit-full-screen .clock {
    transform: scale(1.2);
}

:-moz-full-screen .clock {
    transform: scale(1.2);
}

/* 日期显示样式 */
.date-container {
    position: fixed;
    bottom: 20px;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    font-family: Arial, sans-serif;
    z-index: 100;
}

.solar-date,
.lunar-date {
    padding: 8px 16px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.2);
    color: #fff;
    font-size: 16px;
    backdrop-filter: blur(5px);
    transition: all 0.3s ease;
}

/* 日期显示主题适配 */
body.theme-light .solar-date,
body.theme-light .lunar-date {
    background: rgba(0, 0, 0, 0.1);
    color: #333;
}

body.theme-eyecare .solar-date,
body.theme-eyecare .lunar-date {
    background: rgba(44, 122, 76, 0.1);
    color: #2c7a4c;
}

/* 鼠标悬停效果 */
.solar-date:hover,
.lunar-date:hover {
    transform: scale(1.05);
    background: rgba(255, 255, 255, 0.15);
}

body.theme-light .solar-date:hover,
body.theme-light .lunar-date:hover {
    background: rgba(0, 0, 0, 0.15);
}

body.theme-eyecare .solar-date:hover,
body.theme-eyecare .lunar-date:hover {
    background: rgba(44, 122, 76, 0.15);
}
